<template>
  <div class="notifications-container">
    <h1>消息通知</h1>
    <button @click="markAllAsRead" class="mark-all-read">标记全部已读</button>
    <div class="notification-list">
      <div v-if="notifications.length === 0" class="no-data">暂无消息</div>
      <ul>
        <li
          v-for="notification in notifications"
          :key="notification.id"
          :class="{ unread: !notification.isRead }"
          @click="markAsRead(notification.id)"
        >
          <div class="notification-content">{{ notification.content }}</div>
          <div class="notification-time">{{ formatDate(notification.createTime) }}</div>
        </li>
      </ul>
    </div>
    <div class="pagination" v-if="totalPages > 1">
      <button @click="changePage(1)" :disabled="currentPage === 1">首页</button>
      <button @click="changePage(currentPage - 1)" :disabled="currentPage === 1">上一页</button>
      <span>{{ currentPage }}/{{ totalPages }}</span>
      <button @click="changePage(currentPage + 1)" :disabled="currentPage === totalPages">下一页</button>
      <button @click="changePage(totalPages)" :disabled="currentPage === totalPages">末页</button>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { 
  getUserNotifications,
  markNotificationAsRead,
  markAllNotificationsAsRead
} from '@/api/forumApi'

export default {
  name: 'ForumNotifications',
  setup() {
    const notifications = ref([])
    const currentPage = ref(1)
    const pageSize = ref(20)
    const totalPages = ref(1)
    const totalCount = ref(0)
    const loading = ref(false)

    // 获取消息列表
    const fetchNotifications = async () => {
      loading.value = true
      try {
        const res = await getUserNotifications({
          page: currentPage.value,
          limit: pageSize.value
        })
        notifications.value = res.data.items
        totalCount.value = res.data.total
        totalPages.value = Math.ceil(res.data.total / pageSize.value)
      } catch (error) {
        console.error('获取消息列表失败:', error)
      } finally {
        loading.value = false
      }
    }

    // 切换页码
    const changePage = (page) => {
      currentPage.value = page
      fetchNotifications()
    }

    // 标记消息为已读
    const markAsRead = async (notificationId) => {
      try {
        await markNotificationAsRead(notificationId)
        // 更新本地状态
        const notification = notifications.value.find(n => n.id === notificationId)
        if (notification) {
          notification.isRead = true
        }
      } catch (error) {
        console.error('标记消息为已读失败:', error)
      }
    }

    // 标记所有消息为已读
    const markAllAsRead = async () => {
      try {
        await markAllNotificationsAsRead()
        // 更新本地状态
        notifications.value.forEach(notification => {
          notification.isRead = true
        })
      } catch (error) {
        console.error('标记所有消息为已读失败:', error)
      }
    }

    // 格式化日期
    const formatDate = (dateString) => {
      const date = new Date(dateString)
      const now = new Date()
      const diffTime = now - date
      const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24))

      if (diffDays === 0) {
        return date.toLocaleTimeString()
      } else if (diffDays === 1) {
        return '昨天 ' + date.toLocaleTimeString()
      } else if (diffDays < 7) {
        return `${diffDays}天前 ` + date.toLocaleTimeString()
      } else {
        return date.toLocaleString()
      }
    }

    // 初始化
    onMounted(() => {
      fetchNotifications()
    })

    return {
      notifications,
      currentPage,
      totalPages,
      totalCount,
      loading,
      fetchNotifications,
      changePage,
      markAsRead,
      markAllAsRead,
      formatDate
    }
  }
}
</script>

<style scoped>
/* 样式省略，可以根据实际需求添加 */
.unread {
  background-color: #f5f5f5;
}
</style>